<template>
	<view class="">
		<u-navbar :is-back="false" :border-bottom="false" :background="background">
			<view class="d-flex a-center">
				<view class="pl-2 py-2" @click="backtrack_img">
					<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
				</view>
				<view class="font-lg font-weight text-white ml-2">审核客户</view>
			</view>
		</u-navbar>
		<view class="">
			<view class="m-2 px-3 bg-white rounded-10">
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">姓名</view>
					<view class="" v-if="user_name">
						<input type="text" v-model="user_name" @input="name_input" value="" class="text-right"
							placeholder="请输入姓名" />
					</view>
					<view class="" v-else>
						<input type="text" v-model="nickname" @input="name_input" value="" class="text-right"
							placeholder="请输入姓名" />
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">昵称</view>
					<view class="">
						<view class="">{{nickname}}</view>
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">注册手机号</view>
					<view class="">
						<view class="">{{mobile}}</view>
					</view>
				</view>
				<view class="py-3 d-flex j-sb">
					<view class="font-weight font-35">联系电话</view>
					<view class="flex-1">
						<input type="text" v-model="phone" @input="phone_input" value="" class="text-right"
							placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="py-3 d-flex j-sb">
					<view class="font-weight font-35">公司名称</view>
					<view class="flex-1">
						<textarea :auto-height="true" type="text" v-model="company" class="text-right w-100 flex-wrap"
							@input="company_input" placeholder="请输入公司名称" />
					</view>
				</view>
			</view>
			<view class="m-2 px-3 bg-white rounded-10">
				<view class="py-3 d-flex j-sb border-bottom" @click="quote">
					<view class="font-weight font-35">客户级别</view>
					<view class="d-flex">
						<view class="text-999 mr-1">{{user_item.level_name?user_item.level_name:"请设置"}}</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom" @click="yewushow">
					<view class="font-weight font-35">业务员</view>
					<view class="d-flex">
						<view class="text-999 mr-1">{{yewu_item.name?yewu_item.name:"请设置"}}</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view class="py-3 d-flex j-sb" @click="client">
					<view class="font-weight font-35">客户标签</view>
					<view class="d-flex flex-1 flex-wrap j-end">
						<view class="text-999 mr-1" v-if="!tally">{{items.tag_list[0].tag_name||'请设置'}}</view>
						<view class="" v-else>
							<view class="flex-1 d-flex j-end" v-if="item.checked" v-for="(item,index) in tally"
								:key='index'>
								<view class="text-999 mr-1">{{item.tag_name}}</view>
							</view>
						</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
			</view>
			<view class="m-2 px-3 bg-white rounded-10">
				<view class="py-3 d-flex j-sb border-bottom" @click="btnClick">
					<view class="font-weight font-35">所属地区</view>
					<view class="d-flex a-center flex-wrap j-end flex-1">
						<view class="mx-2 text-999">{{address_name?address_name:'请设置'}}</view>
					</view>
					<view class="">
						<u-icon name="map-fill" color="#4470f8" size="50"></u-icon>
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">详细地址</view>
					<view class="flex-1">
						<textarea :auto-height="true" type="text" v-model="minute" @input="minute_input"
							class="text-right w-100 flex-wrap" placeholder="请填写详细地址" />
					</view>
				</view>
				<view class="py-3 d-flex j-sb">
					<view class="font-weight font-35">备注</view>
					<view class="d-flex">
						<input type="text" value="" v-model="remarks" @input="remarks_input" class="text-right"
							placeholder="请输入备注200个字以内" />
						<u-icon class="ml-1" name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="footer"></view>
		<view class="position-fixed bottom-0 w-100 bg-white py">
			<view class="d-flex sub j-sb p-2">
				<button type="warn" class="dele" @click="save">不保存</button>
				<button type="warn" class="rele" @click="sub_next">保存</button>
			</view>
		</view>

		<!-- 默认报价 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="user_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999"></view>
					<view class="text-000 font-35">默认报价</view>
					<view class="text-danger" @click="close">
						<u-icon name="close" color="#777" size="35"></u-icon>
					</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 bg-white">
					<view class="d-flex j-sb a-center p-3 border-bottom" v-for="(item,index) in user_level" :key="index"
						@click="tab_user(item)">
						<view class="flex-1 w-100">
							{{item.level_name}}
						</view>
						<view class="" v-show="user_item.level_id==item.level_id">
							<u-icon name="checkbox-mark" color="#ff0000" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</s-popup>


		<!-- 业务员 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="yewu_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999"></view>
					<view class="text-000 font-35">业务员</view>
					<view class="text-danger" @click="closeyewu">
						<u-icon name="close" color="#777" size="35"></u-icon>
					</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 bg-white">
					<view class="d-flex j-sb a-center p-3 border-bottom" v-for="(item,index) in user_yewu" :key="index"
						@click="tab_yewu(item)">
						<view class="flex-1 w-100">
							{{item.name}}
						</view>
						<view class="" v-show="yewu_item.id==item.id">
							<u-icon name="checkbox-mark" color="#ff0000" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</s-popup>



		<!-- 改价 -->
		<u-popup v-model="bottomShow" width="100%" height="80%" mode="bottom" border-radius="14" closeable="true"
			close-icon="close" close-icon-pos="top-right" close-icon-size="40">
			<view class="">
				<view class="eradders"></view>
				<view class="eradders position-fixed top-0  w-100 bg-white">
					<view class="py-2 border-bottom">
						<view class="font-md d-flex j-center a-center">请选择所在地区</view>
					</view>
					<view class="d-flex address">
						<view class="py-3 mx-2" v-if="province_name" @click="province_tab()">
							<view class="font-weight">{{province_name}}</view>
						</view>
						<view class="py-3 mx-2" v-if="city_name" @click="city_tab(items_province)">
							<view class="font-weight">{{city_name}}</view>
						</view>
						<view class="py-3 mx-2" v-if="county_name" @click="county_tab(items_city)">
							<view class="font-weight">{{county_name}}</view>
						</view>
						<view class="py-3 mx-2" :class="street_show?'active_tab':''" v-if="street_name">
							<view class="font-weight">{{street_name}}</view>
						</view>
						<view class="ml-2 py-3 active_tab" v-if="please">请选择</view>
					</view>
				</view>

				<!-- 省 -->
				<view v-show="address_show" class="content_address mx-2 pt-4" v-for="(item,index) in addressList"
					:key="index" @click="province(item)">
					{{item.name}}
				</view>
				<!-- 市 -->
				<view v-show="province_show" class="content_address mx-2 pt-4" v-for="(item,index) in provinceList"
					:key="index" @click="city(item)">
					{{item.name}}
				</view>
				<!-- 县区 -->
				<view v-show="city_show" class="content_address mx-2 pt-4" v-for="(item,index) in cityList" :key="index"
					@click="county(item)">
					{{item.name}}
				</view>
				<!-- 街道 -->
				<view v-show="county_show" class="content_address mx-2 pt-4 d-flex j-sb"
					v-for="(item,index) in countyList" :key="index" @click="street(item)">
					<view class="" :class="item.id==street_id?'active':''">
						{{item.name}}
					</view>
					<view class="" v-show="item.id==street_id">
						<u-icon name="checkmark" color="#ff1515" size="33"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
			sPopup
		},
		data() {
			return {
				background: {
					background: '#fa7226',
				},
				items: JSON.parse(uni.getStorageSync("terrace_item")),
				user_name: "", // 姓名
				user_id: "", // 会员id
				mobile: "", // 手机号
				company: "", // 公司名称
				their: "", // 所属地区
				minute: "", // 详细地址
				remarks: "", // 备注


				tally: "", // 客户标签

				user_show: false, // 开关
				user_level: "", // 默认报价
				user_item: "", // 会员id

				yewu_show: false, // 开关
				user_yewu: "", // 业务员
				yewu_item: {
					id: "",
					yewu_name: ""
				}, // 会员ids


				bottomShow: false,
				addressTab: "", // 地址tabbar
				addressList: "", // 地址列表
				address_show: false,

				province_show: false,
				city_show: false,
				county_show: false,

				provinceList: "", // 省的列表
				province_name: "", // 省 的名字
				cityList: "", // 市的列表
				city_name: "", // 市的名字
				countyList: "", // 县区的列表
				county_name: "", // 县区的名字
				street_name: "", // 街道名字
				street_id: "", // 街道id
				address_name: "", // 地址
				address_default: "", // 默认地址

				please: false,
				street_show: false,

				items_province: "",
				items_city: "",
				items_county: "",
				items_street: "",

				nickname: "",
				phone: ""
			}
		},
		watch: {
			name(val, oldVal) {
				if (!this.$u.test.chinese(val)) {
					this.$u.toast("格式不正确")
				}
			}
		},
		methods: {
			// 返回
			backtrack_img() {
				uni.navigateBack({
					delta: 1
				})
			},
			name_input(e) {
				this.user_name = e.detail.value
			},
			phone_input(e) {
				this.phone = e.detail.value
			},
			// 地址弹框
			btnClick() {
				this.bottomShow = true
			},

			yewushow() {
				this.yewu_show = true
			},
			// 公司名称
			company_input(e) {
				this.company = e.detail.value
			},
			//  所属地区
			their_input(e) {
				this.their = e.detail.value
			},
			// 详细地址
			minute_input(e) {
				this.minute = e.detail.value
			},
			// 备注
			remarks_input(e) {
				this.remarks = e.detail.value
			},
			// 默认报价
			quote() {
				this.user_show = true
			},
			tab_user(item) {
				this.user_show = false
				this.user_item = item
			},

			tab_yewu(item) {
				this.yewu_item = item
				this.yewu_show = false
			},

			// 客户报价
			client() {
				uni.navigateTo({
					url: '/pagesB/client/tally?user_id=' + this.user_id
				})
				uni.setStorageSync("terrace_item", JSON.stringify(this.tally))
			},

			// 关闭弹框
			close() {
				this.user_show = false
			},

			closeyewu() {
				this.yewu_show = false
			},
			// 保存
			sub_next() {
				let tag_id = []
				if (this.tally) {
					tag_id = this.tally.map(v => {
						return v.checked ? v.tag_id : ""
					})
				}

				this.$H.post("v2/store/user/review", {
					user_id: this.user_id,
					user_name: this.user_name,
					nickname: this.nickname,
					phone: this.phone,
					mobile_phone: this.mobile,
					company_name: this.company,
					level_id: this.user_item.level_id,
					yewu_id: this.yewu_item.id,
					tag_id: this.tally ? tag_id.toString() : "",

					country_id: 1, // 国家id
					province_id: this.items_province.id, // 省份id
					city_id: this.items_city.id, // 城市id
					district_id: this.items_county.id, // 地区id

					address: this.minute,
					note: this.remarks
				}).then(res => {
					if (res.data) {
						console.log(res)
						this.$u.toast("审核成功")
						getApp().globalData.seach_show = true
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					} else {
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			// 不保存
			save() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 省
			province(items) {
				this.items_province = items
				this.address_show = !this.address_show
				this.province_name = items.name

				this.province_show = true
				this.please = true
				console.log(items)
				this.$H.post("v2/store/shop/region", {
					type: 2,
					parent_id: items.parent_id,
				}).then(res => {
					let arr = res.data.regions
					this.provinceList = arr.filter((item, index) => {
						if (items.id == item.parent_id) {
							return item
						}
					})
				})

			},
			//  市
			city(items) {
				this.items_city = items
				this.city_show = true
				this.province_show = !this.province_show
				this.city_name = items.name

				console.log(items)
				this.please = true
				if (this.city_name == this.province_name) {
					this.province_name = ""
				} else {
					this.$H.post("v2/store/shop/region", {
						type: 3,
						parent_id: items.parent_id,
					}).then(res => {
						let arr = res.data.regions
						this.cityList = arr.filter((item, index) => {
							if (items.id == item.parent_id) {
								return item
							}
						})
					})
				}
			},
			// 县区
			county(items) {
				console.log(items)
				this.items_county = items
				this.county_show = true
				this.county_name = items.name
				this.city_show = false

				this.please = true
				this.street_show = true
				this.$H.post("v2/store/shop/region", {
					type: 4,
					parent_id: items.parent_id,
				}).then(res => {
					let arr = res.data.regions
					console.log(res)
					this.countyList = arr.filter((item, index) => {
						if (items.id == item.parent_id) {
							return item
						}
					})
				})
				this.address_name = (this.province_name + this.city_name + this.county_name)
			},
			// 街道
			street(items) {
				this.items_street = items
				this.street_name = items.name

				this.street_id = items.id
				this.please = false
				console.log(items)
				this.bottomShow = false
				this.address_name = (this.province_name + this.city_name + this.county_name + this.street_name)
			},
			// 省 
			province_tab(items) {
				this.county_name = ""
				this.street_name = ""
				this.city_name = ""

				this.address_show = true
				this.province_show = false
				this.city_show = false
				this.county_show = false
				this.please = true
			},
			// 市
			city_tab(items) {
				this.county_name = ""
				this.street_name = ""

				this.street_id = ""
				this.county_show = false
				this.city_show = false
				this.province_show = true
				this.please = true
				this.$H.post("v2/store/shop/region", {
					type: 2,
					parent_id: items.parent_id,
				}).then(res => {
					let arr = res.data.regions
					this.provinceList = arr.filter((item, index) => {
						if (items.id == item.parent_id) {
							return item
						}
					})
				})
			},
			// 县区
			county_tab(items) {
				this.street_name = ""

				this.street_id = ""
				this.county_show = false
				this.city_show = true
				this.please = true

				this.$H.post("v2/store/shop/region", {
					type: 3,
					parent_id: items.parent_id,
				}).then(res => {
					let arr = res.data.regions
					this.cityList = arr.filter((item, index) => {
						if (items.id == item.parent_id) {
							return item
						}
					})
				})
			},
		},
		onShow() {
			if (getApp().globalData.tally_item) {
				this.tally = getApp().globalData.tally_item
				console.log(this.tally)
			}
		},
		onUnload() {
			if (getApp().globalData.tally_item) {
				getApp().globalData.tally_item = ""
			}
			uni.removeStorageSync("terrace_item")
		},
		onLoad(e) {
			console.log(e)
			this.user_id = this.items.user_id
			this.mobile = this.items.mobile_phone
			this.nickname = this.items.nick_name
			this.user_name = this.items.name
			this.company = this.items.company_name
			this.minute = this.items.address

			this.tally = this.items.tag_list.map(v => {
				return {
					...v,
					show: false,
					checked: true
				}
			})

			this.$H.post("v2/store/user/level", {}).then(res => {
				this.user_level = res
			})

			this.$H.post("v2/store/user/yewu", {}).then(res => {
				this.user_yewu = res
			})

			// 地址
			this.$H.post("v2/store/shop/region", {
				device: "",
				client: uni.getStorageSync("client"),
				code: 5002,
				udid: "",
				type: 1,
				parent_id: 1,
			}).then(res => {
				this.address_show = true
				this.please = true
				this.addressList = res.data.regions
				this.u_loadmore = false
			})
		}
	}
</script>

<style>
	.sub /deep/ .dele {
		background: linear-gradient(to right, #ff9900, #ff9900);
		border-radius: 50upx;
		width: 45%;
		color: #FFFFFF;
		font-size: 30upx;
	}

	.sub /deep/ .dele::after {
		border: none;
		color: #000000;
	}

	.sub /deep/ .rele {
		width: 45%;
		border-radius: 50upx;
		font-size: 30upx;
		background: linear-gradient(to right, #F31E3E, #FB4F37);
	}

	.address {
		border-bottom: 1px solid #eaeaea;
	}

	.content_address {
		height: 100%;
	}

	.eradders {
		height: 185upx;
	}

	.active_tab {
		color: #ff3333;
		border-bottom: 3px solid #ff3333;
	}
</style>